<template>
  <u-popup width="400px" :show="show" title="登录" :showCancelButton="true" mode="center" :round="10" :closeable="true"
    @close="handleClose">
    <view class="login-content">
      <view class="login-title">登录</view>
      <u--form ref="formRef" :model="formModel" labelWidth="0" :rules="rules">
        <u-form-item prop="phone">
          <u-input v-model="formModel.phone" placeholder="请输入手机号" maxlength="11">
            <view class="login-prefix" slot="prefix">
              <text>手机号</text>
            </view>
          </u-input>
        </u-form-item>
        <u-form-item prop="password">
          <u-input v-model="formModel.password" type="password" placeholder="请输入密码" maxlength="30">
            <view slot="prefix" class="login-prefix">
              密码
            </view>
          </u-input>
        </u-form-item>
      </u--form>
      <u-button style="margin-top: 12px;" text="确定" color="#DC2D1F" shape="circle" :loading="loading"
        loadingText="登录中..." @click="handleLogin" />
    </view>
    <u-toast ref="uToast"></u-toast>
  </u-popup>
</template>

<script lang="ts">
import {
  Component,
  Vue,
  Ref
} from "vue-property-decorator"
import { User } from "@/api/user/userService"
import md5 from "@/utils/md5"

@Component({})
export default class Login extends Vue {
  @Ref('formRef') readonly formRef!: HTMLElement;
  @Ref('uToast') readonly uToast!: HTMLElement;
  public show: boolean = false;
  public loading: boolean = false
  // @Model()
  public formModel = {
    phone: "",
    password: ""
  };

  public rules = {
    "phone": [{
      required: true,
      message: '请输入手机号',
      trigger: ['change', 'blur'],
    }, {
      validator: (rule: any, value: any, callback: any) => {
        return uni.$u.test.mobile(value);
      },
      message: '手机号码不正确',
      trigger: ['change', 'blur'],
    }],
    "password": [{
      required: true,
      message: '密码不能为空',
      // blur和change事件触发检验
      trigger: ['blur', 'change'],
    }, {
      min: 6,
      message: '密码最少需要六位'
    },]
  }

  public handleShow() {
    this.show = true
  };

  public handleClose() {
    this.show = false
  }

  public handleLogin() {
    this.formRef?.validate().then(() => {
      this.loading = true
      const data = {
        phone: this.formModel.phone,
        password: this.formModel.password
      }
      User.passwordLogin(data).then((res: any) => {
        console.log(res);
        if (res.code !== 200) {
          return this.uToast?.show({
            type: "error",
            title: "登录失败",
            message: res.message
          })
        }
        console.log(res);
      }).finally(() => {
        this.loading = false
      })
    })
  }

  // DC2D1F
}
</script>

<style lang="scss">
.login-content {
  width: 400px;
  padding: 0 36px 24px 24px;

  .login-title {
    width: auto;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .login-prefix {
    width: 54px;
    font-size: 14px;
  }
}
</style>
